<!doctype html>
<html lang="en" class="fullscreen-bg">

<head>
	<title>人脸认证后台管理系统</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<link rel="stylesheet" href="assets/css/source_sans.css">
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<div class="vertical-align-wrap">
			<div class="vertical-align-middle">
				<div class="auth-box ">
					<div class="left">
						<div class="content">
							<div class="header">
								<div class="logo text-center"><img src="assets/img/logo-dark.png" alt="Klorofil Logo"></div>
								<p class="lead">Login to your account</p>
							</div>
							<form class="form-auth-small">
								<div class="form-group">
									<label for="signin-email" class="control-label sr-only">Email</label>
									<input type="email" class="form-control" id="login_email" value="" placeholder="Email">
								</div>
								<div class="form-group">
									<label for="signin-password" class="control-label sr-only">Password</label>
									<input type="password" class="form-control" id="login_password" value="" placeholder="Password">
								</div>
								<div class="form-group clearfix">
									<label class="fancy-checkbox element-left">
										<input type="checkbox">
										<span>Remember me</span>
									</label>
								</div>
								<button type="button" id="btn_login" class="btn btn-primary btn-lg btn-block">LOGIN</button>
								<div class="bottom">
									<span class="helper-text"><i class="fa fa-lock"></i> <a href="#">Forgot password?</a></span>
								</div>
							</form>
						</div>
					</div>
					<div class="right">
						<div class="overlay"></div>
						<div class="content text">
							<h1 class="heading">Free Bootstrap dashboard template</h1>
							<p>by The Develovers</p>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- END WRAPPER -->
</body>

<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/json2.js"></script>
<script language="JavaScript">
    $().ready(function(){
        $("#btn_login").click(function(){
            do_login();
        })
    })
    function do_login(){
        var email = $("#login_email").val();
        var password = $("#login_password").val();

        if( email == null || email == ""){
            alert("请输入Email");
            $("#login_email").focus();
            return;
        }
        if(password == null || password == ""){
             alert("请输入Password");
             $("#login_password").focus();
            return;
        }

        //开始进行登录操作
        var data = {"email" : email,"password" : password}
        $.ajax( {
            type : "POST",
            url : "login",
            dataType : "json",
            contentType: "application/json",
            data : JSON.stringify(data),
            error: function( XMLResponse ) {
                alert( XMLResponse.responseText )
            },
            success : function ( data ) {
                if ("success" == data.status) {
                     window.location.href = "/face_recognition"
                }else{
                    alert( data.message );
                }
            }
        } );
    }
</script>
</html>
